<template>
    <view class="swiperContent">
        <swiper
            @change="change"
            @animationfinish="animationfinish"
            :indicator-dots="indicatorDots"
            :indicator-active-color="indicatorActiveColor"
            :indicator-color="indicatorColor"
            :current="current"
            :interval="interval"
            :duration="duration"
            :circular="circular"
            :vertical="vertical"
            :previous-margin="previousMargin"
            :next-margin="nextMargin"
            :display-multiple-items="displayMultipleItems"
            :skip-hidden-item-layout="skipHiddenItemLayout"
            :autoplay="(autoplay && flag)"
            :style="{'height':cardSwiper+'rpx'}"
            :class="(swiperType && displayMultipleItems ==1 && !vertical && !fullScreen)?'cardSwiper':'' "
            class="screen-swiper uni-swiper-wrapper">
            <swiper-item class="swiper-item"  v-for="(item,index) in swiperList" :key="index" :class="(cardCur==index && displayMultipleItems ==1 && !vertical &&  !fullScreen)?'cur':''"  @tap="clickItem(index)">
               <view v-if="item.url && !item.video" class="border-radius">
                    <image :src="item.url"  :style="{'height':swiperHeight+'rpx'}" class="img border-radius"></image>
                    <text v-if="textTip" class="swiperText" :style="{'bottom':(swiperType?(textStyleBottom+12):textStyleBottom)+'%','right':textStyleRight+'%','color':textStyleColor,'background':textStyleBgcolor,'font-size':upxtopx(textStyleSize)}">{{item[textKey]}}</text>
                </view>
                <view v-if="item.url && item.video" >
                <video :src="item.video" @play="play" @pause="pause" @ended="ended" style="width: 100%" :style="{'height':swiperHeight+'rpx'}" :autoplay="videoAutoplay" objectFit="cover"></video>
                </view>
            </swiper-item>
            <swiper-item class="swiper-item"  v-if="swiperList.length==0" >
                <text></text>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
    export default {
       name:"bw-swiper",
//         created:function(){
//             var that = this;
//             if(this.fullScreen){
//                 uni.getSystemInfo({
//                     success:function(e){
	
//                     that.swiperHeight = e.screenHeight -44
//                 }})
//             }
//         },

//         mounted:function(){
//             if(!this.fullScreen){
//                 const query = uni.createSelectorQuery().in(this);
//                 query.select('.swiper-item').boundingClientRect(data => {
//                     if(!!data){
//                         this.swiperHeight = data.width/this.w_h;
//                     }
//                 }).exec();
//             }    
//         },

        props: {
            fullScreen:{ // 是否全屏
                type:Boolean,
                default:false
            },
            swiperList:{ // 滑块视图容器数据
                type:Array,
                required: true,
                default:function(){
                    return []
                }
            },

            swiperType:{  // false => 全屏限高轮播图  true => 卡塔式轮播图
                type:Boolean,
                default:false
            },

            videoAutoplay:{ // true =>video 自动播放
                type:Boolean,
                default:false
            },

            videoKey:{  // 视频映射的键
                type:String,
                default:'src'
            },

            imageKey:{ //  图片映射的键
                type:String,
                default:'url'
            },

            textKey:{ //   文字说明映射的键
                type:String,
                default:'text'

            },

            textTip:{ // 图片文字说明 false => 隐藏
                type:Boolean,
                default:false
            },

            textStyleSize:{ // 图片文字大小
                type:Number,
                default:24
            },

            textStyleBottom:{ // 图片文字位置
                type:Number,
                default:5
            },

            textStyleRight:{ // 图片文字位置
                type:Number,
                default:5
            },

            textStyleColor:{ // 图片文字颜色
                type:String,
                default:'#ffffff'
            },

            textStyleBgcolor:{ // 图片文字背景色
                type:String,
                default:'transparent'
            },

            w_h:{  //宽高比 推荐 w/h => 2
                type:Number,
                default:2
            },

            skipHiddenItemLayout:{ //是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 
                type:Boolean,
                default:false
            },

            displayMultipleItems:{ //同时显示的滑块数量
                type:Number,
                default:1
            },

            nextMargin:{ // 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 头条小程序不支持
                type:String,
                default:'0px'
            },

            previousMargin:{//前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值头条小程序不支持
                type:String,
                default:'0px'
            },

            vertical:{ //滑动方向是否为纵向 卡牌  不支持纵向以及同时显示的2块以上滑块数量
                type:Boolean,
                default:false
            },

            circular:{ // 是否采用衔接滑动
                type:Boolean,
                default:true
            },

            duration:{ // 滑动动画时长
                type:Number,
                default:500
            },

            interval:{ // 自动切换时间间隔
                type:Number,
                default:5500
            },

            current:{ // 当前所在滑块的 index
                type:Number,
                default:0
            },

            autoplay:{ // 是否自动切换--轮播
                type:Boolean,
                default:false
            },

            indicatorColor:{ // 指示点颜色
                type:String,
                default:'#CCCCCC'
            },

            indicatorActiveColor: { // 当前选中的指示点颜色
                type: String,
                default: '#ffffff'
            },

            indicatorDots: { // 是否显示面板指示点
                type: Boolean,
                default: true

            },
            cardSwiper:{
				type:Number,
				default:0
			},
			swiperHeight:{
				type:Number,
				default:860
			}

        },

        data() {
            return {
                flag:true,
                cardCur:0,
            }
        },
        computed:{
        },

        methods: {
            upxtopx:function(size){
                // #ifdef MP-WEIXIN
                return uni.upx2px(size)+'px'
                // #endif
                // #ifndef MP-WEIXIN
                return size+'upx';
                // #endif
            },

            play:function(){
                this.flag = false
            },

            pause:function(){
                this.flag = true
            },

            clickItem:function(index){
                if(this.swiperList.length>0){
                    this.$emit('clickItem',this.swiperList[index])
                }
            },

            change:function(e){
	            // console.log('e',e.detail.current);
                this.$emit('change',e)
            },

            animationfinish:function(e){
                this.cardCur = e.detail.current;
                this.$emit('animationfinish',e)
            }
        }
    }
</script>
<style lang="scss">
	//设置轮播的指示点大小
	.uni-swiper-wrapper {
	/deep/ .uni-swiper-dots { // 指示点整个区域
	 left: 600rpx;
	 }
	 /deep/ .uni-swiper-dot { // 指示点元素默认样式
	 width: 15upx !important;
	 height: 15upx !important;
	 // border: 1rpx solid #E0B079;
	background-color: rgba(255, 255, 255,.3);
	  }
	 /deep/ .uni-swiper-dot-active { // 指示点元素激活（当前选中）状态样式
	 // background: #CD9763;
	background-color: #fff !important;
	width: 40rpx !important;
	border-radius: 10rpx;
		    }
	}
	
	.cardSwiper{
		/* height: 353px !important; */
	}
	.swiper-item{
		width: 100%;		
	}
	
	.swiper-item .img{
	  /* margin-top: 40rpx; */
	  width: 100%;
	  height: 100%;
	}
	
</style>

